<template>
  <div>
    <mt-field label="用户名" placeholder="请输入用户名" v-model="username"></mt-field>
    {{username}}
    <list-item v-for="post in posts" :key="post.id" :post="post">
      <div>
        <button @click="console(post.id)">文章详情</button>
      </div>
    </list-item>

    <base-component @commit="commitMethod" @commit1="commitMethod1"></base-component>
    <my-input type="text" v-model="inputValue"></my-input>
    {{inputValue}}
    <component v-bind:is="MyInput"></component>
    <ul v-for="i in 3">
      <li is="MyInput"></li>
    </ul>
  </div>
</template>

<script>
  import ListItem from './ListItem'
  import BaseComponent from './BaseComponent'
  import MyInput from './MyInput'

  export default {
    name: "ComponentDemo",
    components: {
      ListItem,
      BaseComponent,
      MyInput
    },
    data() {
      return {
        username: '',
        posts: [
          {
            id: 1,
            head: '1111',
            time: '2018-1-2',
            context: 'aaabbbcccaaabbbcccaaabbbcccaaabbbcccaaabbbcccaaabbbcccaaabbbcccaaabbbcccaaabbbcccaaabbbcccaaabbbccc'
          },
          {
            id: 2,
            head: '2222',
            time: '2018-1-1',
            context: 'aaabbbcccaaabbbcccaaabbbcccaaabbbcccaaabbbcccaaabbbcccaaabbbcccaaabbbcccaaabbbcccaaabbbcccaaabbbccc'
          },
          {
            id: 3,
            head: '333',
            time: '2018-13-11',
            context: 'aaabbbcccaaabbbcccaaabbbcccaaabbbcccaaabbbcccaaabbbcccaaabbbcccaaabbbcccaaabbbcccaaabbbcccaaabbbccc'
          },
          {
            id: 4,
            head: '5555',
            time: '2018-12-11',
            context: 'aaabbbcccaaabbbcccaaabbbcccaaabbbcccaaabbbcccaaabbbcccaaabbbcccaaabbbcccaaabbbcccaaabbbcccaaabbbccc'
          }
        ],
        inputValue:'',
        MyInput:'mt-field'
      }
    },
    methods: {
      commitMethod() {
        console.log('commit success')
      },
      commitMethod1(value) {
        console.log(value)
      },
      console(msg){
        console.log(msg)
      }
    }
  }
</script>

<style scoped>

</style>
